<template>
  <div class="container">
    <div class="header">
      <div>
        <router-link to='/index111'>
          <label>〈</label>
        </router-link>
      </div>
      <div><span>订单查询</span></div>
      <div><span>设置  </span></div>
    </div>
    <div class="context">
      <div class="sr-ss">
        <el-input placeholder="请输入要搜索的内容"></el-input>
        <el-button type="primary">搜索</el-button>
      </div>
      <span>订单总数：{{num}}，订单总额：{{money}}({{sum}}*{{num}})</span>
      <div class="times">
        <span>选择日期</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        {{value1}}{{value2}}
      </div>
      <div class="showCentext">
        <ul>
          <li>
            <div class="border">
              <div>
                <span class="blue">艾灸</span>
                <span class="red">80元</span>
              </div>
              <div><span>冯长英</span><span>电话号</span><span>2021-01-01 00:00:00</span></div>
              <div><span>备注</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'inquire',
    data() {
      return {
        num: '5',
        sun: '80',
        money: num * sun,
        value1: '',
        value2: '',

      }
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
    background-color: #00afff;
    color: white;
  }

  .header div {
    width: 20%;
    margin-top: auto;
    margin-bottom: auto;
  }

  .context {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .context .sr-ss {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
  }

  .context .times {
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
  }

  .context .showCentext {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .context .showCentext ul {
    list-style-type: none;
    margin-top: 12px;
    margin-left: 5px;
    padding: 0;
  }
  .context .showCentext ul li .border {
    width: 95%;
    height: 125px;
    border: 1px solid;
    border-color: #00afff;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
  }
  .blue{
    color: deepskyblue;
    font-size: 18px;
    font-weight: bold;
  }
  .red{
    color: red;
    font-size: 18px;
    font-weight: bold;
  }
  .context .showCentext ul li .border div {
    margin: 5px ;
    display: flex;
    justify-content: space-between;
  }

</style>
